<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo {
				width: 100px;
				/* 小人怎么走 ： 通过定位 设置left top */
				position: fixed;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<img src="img/ganlai.gif" alt="" class="demo">
		
		<script>
			/* 事件对象 ：事件处理函数中，接收一个数据 ，数据中是这次事件的一些信息*/
			var demo  = document.querySelector(".demo")
			window.onmousemove = function(e){
				// 通过事件对象 获取 鼠标的坐标
				var x = e.clientX // 100
				var y = e.clientY // 200
				
				// 根据鼠标的位置 设置 img的定位的值
				demo.style.left = x - 50 + "px"
				demo.style.top = y - 70 + "px"
			}
		</script>
	</body>
</html>
<!-- // 新的知识点  逻辑思维
 1、小人跟着鼠标走
 2、当鼠标移动时，小人移动到鼠标所在的位置
	window.onmousemove = {移动  位置}
 -->